import React, { Component } from 'react';
import router from 'umi/router';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Row,
  Col,
  Input,
  Select,
  Button,
} from 'antd';
import '@ant-design/compatible/assets/index.css';

import { CompanyListItem } from '../data';

const { Option } = Select;
const { Item } = Form;

interface ZT_ExpressProps extends FormComponentProps {
  dataInfo: CompanyListItem[];
  type: number;
  companyID: number;
  submit: (params: any) => void;
}

class ZT_ExpressElem extends Component<ZT_ExpressProps> {
  handleSubmit = () => {
    const { form: { validateFieldsAndScroll } } = this.props;
    validateFieldsAndScroll((errors, values) => {
      if (errors) return;

      const {
        logis,
        garden,
        contact,
        phone,
        status,
      } = values;

      const params = status.reduce((origin: any, item: number, index: number) => {
        const param: any = {};

        if (logis) {
          param.logisId = logis[index].key;
          param.logisName = logis[index].label;
        }
        if (garden) {
          param.gardenId = garden[index].key;
          param.gardenName = garden[index].label;
        }
        if (contact) param.contact = contact[index];
        if (phone) param.phone = phone[index];
        param.status = item;

        origin.push(param);

        return origin;
      }, []);

      delete params.logis;
      delete params.garden;

      const { submit } = this.props;
      submit(params);
    });
  }

  render() {
    const {
      form: { getFieldDecorator },
      dataInfo,
      type,
      companyID,
    } = this.props;

    return (
      <Form hideRequiredMark className="tableListForm">
        <Row gutter={{ md: 8, xl: 24, lg: 48 }} className="batchBox">
          {dataInfo.map((item: any, index: number) => (
            <Col
              md={12}
              sm={24}
              key={item.id}
              className="batchList"
            >

              <Col md={18} sm={24}>
                {type === 1 && (
                  <Item label="物流中心" colon={false}>
                    {getFieldDecorator(`logis[${index}]`, ({
                      initialValue: { key: item.id, label: item.name },
                    }))(
                      <Select
                        disabled
                        labelInValue
                        placeholder="请选择"
                      >
                        <Option value={item.id}>{item.name}</Option>
                      </Select>,
                    )}
                  </Item>
                )
                  }
                {type !== 1 && (
                <Item label="校园小区" colon={false}>
                  {getFieldDecorator(`garden[${index}]`, ({
                    initialValue: { key: item.id, label: item.name },
                  }))(
                    <Select
                      disabled
                      labelInValue
                      placeholder="请选择"
                    >
                      <Option value={item.id}>{item.name}</Option>
                    </Select>,
                  )}
                </Item>
                )
                  }
              </Col>
              {companyID !== 78 && (
              <>
                <Col md={18} sm={24}>
                  <Item label="　联系人" colon={false}>
                    {getFieldDecorator(`contact[${index}]`, ({
                      rules: [{ required: true, message: '请输入联系人' }],
                    }))(
                      <Input allowClear placeholder="请输入" />,
                    )}
                  </Item>
                </Col>
                <Col md={18} sm={24}>
                  <Item label="联系电话" colon={false}>
                    {getFieldDecorator(`phone[${index}]`, {
                      rules: [{ required: true, message: '请输入联系电话' }],
                    })(
                      <Input allowClear placeholder="请输入" />,
                    )}
                  </Item>
                </Col>
              </>
              )
                }
              {(companyID === 78 && type === 1) && (
              <Col md={18} sm={24}>
                <Item label="联系电话" colon={false}>
                  {getFieldDecorator(`phone[${index}]`, {
                    rules: [{ required: true, message: '请输入联系电话' }],
                  })(
                    <Input allowClear placeholder="请输入" />,
                  )}
                </Item>
              </Col>
              )
                }
              <Col md={18} sm={24}>
                <Item label="是否有效" colon={false} className="marginB0Import">
                  {getFieldDecorator(`status[${index}]`, ({
                    initialValue: 1,
                  }))(
                    <Select placeholder="请选择">
                      <Option value={1}>有效</Option>
                      <Option value={0}>无效</Option>
                    </Select>,
                  )}
                </Item>
              </Col>
            </Col>
          ))}
        </Row>
        <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
          <Col md={12} sm={24} className="paddingT20">
            <Button
              type="primary"
              onClick={this.handleSubmit}
            >
              保存
            </Button>
            <Button
              type="primary"
              ghost
              className="marginL16"
              onClick={() => router.goBack()}
            >
              取消
            </Button>
          </Col>
        </Row>
      </Form>
    );
  }
}

export default Form.create<ZT_ExpressProps>()(ZT_ExpressElem);
